<template>
	<view class="consult">
		<view :class="{ sheet: showSheet }"></view>
		<view :class="{ 'sheet-active': showSheet }" class="sheet-normal">
			<view class="sheet-box">
				<view class="register-box" v-if="showType == 0">
					<view class="title">等待接诊</view>
					<view class="tips">如您的病情紧急，建议您取消咨询，并及时前往医院就诊</view>
					<view class="btn-box">
						<view class="btn-item" @click="cancleReg">取消咨询</view>
					</view>
				</view>
				<view class="end-box" v-else>
					<view class="title">咨询已结束</view>
					<view class="tips">请为医生的服务打分，如需继续咨询您可以选择再次咨询</view>
					<view class="btn-box">
						<view class="btn-item left" @click="clickEvaluate">评价服务</view>
						<view class="btn-item right" @click="clickAskAgain">再次咨询</view>
					</view>
				</view>
		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'consultSheet',
		props:{
			showSheet:{
				type:Boolean,
				default:false
			},
			/**
			 * 0-预约、取消  1-结束
			 */
			showType:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			cancleReg(){
				this.$emit('cancelReg');
			},
			clickEvaluate(){
				this.$emit('clickEvaluate');
			},
			clickAskAgain(){
				this.$emit('clickAskAgain');
			},
			
		}
		
	}
</script>

<style lang="scss">
	
	
	.sheet-box{
		padding: 0rpx 30rpx;
		position: relative;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 50rpx 0 30rpx;
		}
		.tips {
			padding: 10rpx 30rpx 50rpx;
			line-height: 1.5;
		}
		.btn-box {
			display: flex;
			justify-content: space-evenly;
			.btn-item {
				background-color: #FF562F;
				padding: 20rpx 50rpx;
				color: #fff;
				border-radius: 100rpx;
			}
			.left {
				background-color: #EEA000;
			}
			.right {
				background-color: $yy-main-col;
			}
		}
		
	}
	
	.sheet {
		position: fixed;
		// top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 100
	}
	.sheet-normal {
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100vw;
		padding-bottom: 50rpx;
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		
		background-color: #ffffff;
		transform: translate(-50%, 0%) scale(0);
		opacity: 0;
		transition: 0.3s;
		line-height: 1;
		text-align: center;
		color: #282828;
		z-index: 101;
	}
	
	.sheet-active {
		transform: translate(-50%, 0%) scale(1);
		opacity: 1;
	}
	
	
</style>